<!-- src/views/NotFound.vue -->
<template>
  <v-container height="0px">
    <v-row class="text-center" align="center" justify="center">
      <v-col>
        <!-- 图标 -->
        <v-icon size="72" color="primary" class="mb-3 fade-in">mdi-emoticon-sad-outline</v-icon>

        <!-- 标题 -->
        <h1 class="text-h2 font-weight-bold text-primary mb-2 tracking-tight">404</h1>

        <!-- 副标题 -->
        <h2 class="text-h6 font-weight-medium text-medium-emphasis mb-4">页面未找到</h2>

        <!-- 描述 -->
        <p class="text-body-1 text-medium-emphasis mb-8">
          抱歉，您要查找的页面不存在。<br />
          它可能已被移动、删除，或链接已失效。
        </p>

        <!-- 按钮 -->
        <v-hover v-slot="{ isHovering, props }">
          <v-btn
            v-bind="props"
            color="primary"
            size="large"
            variant="elevated"
            append-icon="mdi-home"
            class="px-8 rounded-xl transition-all"
            :elevation="isHovering ? 8 : 2"
            to="/"
          >
            返回首页
          </v-btn>
        </v-hover>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup lang="ts">
import { onMounted } from "vue";

onMounted(() => {
  console.error("404 Page Not Found: 用户访问了不存在的路由。");
});
</script>

<style scoped>
.fade-in {
  animation: fadeIn 1s ease-in-out;
}

.tracking-tight {
  letter-spacing: -1px;
}

.transition-all {
  transition: all 0.3s ease;
}

/* 轻微渐显动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
